<template>
  <section class="loading-wrapper">
    <div
      v-if="loading"
      class="loading-container"
      :style="{ 'background-image': `url(${isBlack ? loadingBlackImg : loadingImg})` }"></div>
  </section>
</template>

<script setup lang="ts">
import loadingImg from '@/assets/images/loading.png';
import loadingBlackImg from '@/assets/images/loading-black.png';

defineProps({
  isBlack: Boolean,
  loading: {
    type: Boolean,
    default: true,
  },
});
</script>

<style scoped lang="scss">
.loading-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30rem;
  height: 10rem;
  .loading-container {
    width: 100%;
    height: 100%;
    background-size: 100% 3000%;
    animation: loadingLoop 0.5s steps(30) infinite forwards;

    @keyframes loadingLoop {
      0% {
        background-position: 0 0;
      }
      100% {
        background-position: 0 -3000%;
      }
    }
  }
}
</style>
